<div class="jumbotron">
  <div class="row">
    <div class="col-md-6">
      <h1>Ember v3.17</h1>
    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-sm-6 smallpad">
          <BsButton id="run" {{on 'click' this.create}}>
            Create 1,000 rows
          </BsButton>
        </div>
        <div class="col-sm-6 smallpad">
          <BsButton id="runlots" {{on 'click' this.runLots}}>
            Create 10,000 rows
          </BsButton>
        </div>
        <div class="col-sm-6 smallpad">
          <BsButton id="add" {{on 'click' this.add}}>
            Append 1,000 rows
          </BsButton>
        </div>
        <div class="col-sm-6 smallpad">
          <BsButton id="update" {{on 'click' this.update}}>
            Update every 10th row
          </BsButton>
        </div>
        <div class="col-sm-6 smallpad">
          <BsButton id="clear" {{on 'click' this.clear}}>
            Clear
          </BsButton>
        </div>
        <div class="col-sm-6 smallpad">
          <BsButton id="swaprows" {{on 'click' this.swapRows}}>
            Swap Rows
          </BsButton>
        </div>
      </div>
    </div>
  </div>
</div>


{{#if this.data.length}}
  <table class="table table-hover table-striped test-data">
    <tbody>
      {{#each this.data key="id" as |item|}}
        <TableRow @item={{item}} @onSelect={{fn this.select item.id}} @onRemove={{fn this.remove item.id}} />
      {{/each}}
    </tbody>
  </table>
{{/if}}


<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>